<template>
	<div class="container">
		<!-- 查找中心部分 -->
		<div class="headerTitle">
			<div class="hSpan">
				<span class="ico"></span>
				{{ $t('message.searchTableTitle') }}
			</div>
			<div class="hSpan refreshText">
				<span class="freushico"></span>
				{{ $t('message.refresh') }}
			</div>
		</div>
		<div class="searchMain">
			<div v-for="item in SearchColumns" :key="item.id">
				<div class="appcon-10">
					<label for="">{{ item.label }}</label>
				</div>
				<div class="appcon-15">
					<HhgInput v-model:value="item[getFirstKey(item)]" v-if="item.searchType === 'input'" @input="getValue" :config="{}">
						<!-- <template #suffix>
							<img src="../../assets/ico/left2.png" alt=""/>
						</template> -->
					</HhgInput>
					<HhgInputMember v-model:value="item[getFirstKey(item)]" @fuzzySearch="fuzzySearchMember" @selectedMember="(data)=>{selectedMember(data, item, getFirstKey(item))}" v-if="item.searchType === 'inputMemberApply'" v-bind="attrs" :config="{
						memberList,
						title: '选择成员',
						subTitle: '待选人员（您可以通过搜索查询人员）',
						type: 1//type=1-返回人员姓名+人员code  2-返回人员姓名+人员code + 返回单个数据流,multiple-false是单选true是多选
					}"/>
					<HhgInputMember v-model:value="item[getFirstKey(item)]" v-if="item.searchType === 'inputMemberOragan'" @fuzzySearch="fuzzySearchOrganization" v-bind="attrs" @selectedMember="(data)=>{selectedMember(data, item, getFirstKey(item))}" :config="{
						memberList: organizationList,
						title: '选择组织',
						isTree: true,//是否组织的tree结构
						className: 'selectedOrg',
						subTitle: '待选组织（您可以通过搜索查询组织）',
						multiple: false,
						type: 1//type=1-返回人员姓名+人员code  2-返回人员姓名+人员code + 返回单个数据流,multiple-false是单选true是多选
					}"/>
					<HhgSelect v-model:value="item[getFirstKey(item)]" v-if="item.searchType === 'select'" @change="getValue(item)" :config="selectConfig" :options="[
						{ value: 0, label: '测试数据1' },
						{ value: 1, label: '测试数据2' },
						{ value: 1, label: '测试数据2' },
						{ value: 1, label: '测试数据2' },
						{ value: 1, label: '测试数据2' },
						{ value: 1, label: '测试数据2' }
					]"/>
					<HhgTime v-if="item.searchType === 'time'" v-model:showTimer="timer" placeholder="" :config="{
						format,
						value: timer,
						showTime: true
					}"/>
				</div>
			</div>
			<div class="subBottom">
				<Button class="button-01" type="primary" @click="filter">搜索</Button>
				<Button class="button-01" type="primary" @click="clearFilter">重置</Button>
				<Button class="button-01" type="primary">导出</Button>
			</div>
		</div>
		<!-- 查找中心列表 -->
		<div class="tablemain">
			<div class="tableTop">
				<div class="title">查找中心</div>
				<div class="rgihtCont">
					<div class="showHide">
						<span>显示隐藏列</span>
						<img :src="frushImage" alt="" class="fileImg"/>
					</div>

					<div class="lockLine">
						<span>锁定行列</span>
						<img :src="frushImage" alt="" class="fileImg"/>
					</div>
					<img :src="frushImage" alt="" class="refrushimg"/>
				</div>
			</div>
			<TableCell :dataSources="tableList" :pagination="false" :columns="columns"></TableCell>
			<!-- 分页组件 -->
			<div class="pagination">
				<img :src="leftImage" alt="" class="fileImg"/>
				<img :src="leftImage" alt="" class="fileImg"/>
				<span>第</span>
				<a-input :style="[{ 'width': '10px', 'height': '20px' }]"></a-input>
				<span>共（6页）</span>
				<img :src="rightImage" alt="" class="fileImg"/>
				<img :src="rightImage" alt="" class="fileImg"/>
				<span>每页记录</span>
				<a-input :style="[{ 'width': '10px', 'height': '20px' }]"></a-input>
				<img :src="frushImage" alt="" class="fileImg"/>
				<span>显示1到10，共59页</span>
			</div>
		</div>
		<!-- 查找中心列表 -->
		
	</div>
</template>
<script setup>
import { ref, onMounted, useAttrs } from 'vue'
import frushImage from '@/assets/ico/refrush.png'
import leftImage from '@/assets/ico/left.png'
import rightImage from '@/assets/ico/right.png'
import { list } from '@/api/data'
import { TableColumns } from "@/utils/tableConfig"
import { SearchParams } from "@/utils/config"
import { Modal } from "ant-design-vue"
import { mapRecursive, buildTree } from '@/utils/index'//递归和多维数据组合
import { getMemberList, getOrganizationList } from '@/api/data'

import HhgInput from '@/components/hhg-input/hhg-input.vue'
import HhgInputMember from '@/components/hhg-inputSingleMember/hhg-inputSingleMember'
import HhgSelect from '@/components/hhg-select/hhg-select'

import HhgTime from '@/components/hhg-time/hhg-time'

import TableCell from '@/components/hhg-tableBase/hhg-tableBase'

//属性穿透
const attrs = useAttrs()

const selectConfig = ref({
	type: 'noSearch',
	showSearch: false
})

//时间插件用法
const format = ref('YYYY-MM-DD HH:mm:ss')
const timer = ref('2023-06-02 12:30:00')
// const updateTime = value=> {
// 	timer.value = isNaN(value) ? '' : value
// }

//表头
const columns =  ref(TableColumns.SearchColumns)
//搜索框
//获取json第一个key值
const getFirstKey = (obj)=> {
	return Object.keys(obj)[0]
}
const SearchColumns =  ref(SearchParams)
const getValue = ()=> {
	
}
const filter = ()=> {
	const content = {}
	SearchColumns.value.forEach(i=> {
		content[getFirstKey(i)] = i[getFirstKey(i)]
	})
	Modal.info({
		title: '查找中心搜索数据',
		content: JSON.stringify(content),
		onOk() {
			
		}
	})	
}
const clearFilter = ()=> {
	const content = {}
	SearchColumns.value.forEach(i=> {
		i[getFirstKey(i)] = ''
		content[getFirstKey(i)] = ''
	})
	Modal.info({
		title: '查找中心搜索数据',
		content: JSON.stringify(content),
		onOk() {
			
		}
	})
}

//弹出会员
//混合选择组织数据格式
const organizationItem = (item)=> {
  return {
    pId: item.pId,
    id: item.id,
    name: item.name,
    code: item.code,
    label: item.name,
    displayName: item.name,
    value: item.id
  }
}
const memberList = ref([])
const organizationList = ref([])
//选择成员子组件触发搜索
const fuzzySearchMember = async (data)=> {
	const res = await getMemberList(data)
	if (res.code) {
		memberList.value = res.data.list
		
	}
}
const fuzzySearchOrganization = async (data)=> {
	const res = await getOrganizationList(data)
	if (res.code) {
		organizationList.value = mapRecursive(buildTree(res.data.list), organizationItem)
		
	}
}
//获取成员组件里数据
const selectedMember = (value, item, key)=> {
	Modal.info({
		title: '获取的人员数据',
		content: '人员姓名:' + value.name + '人员编码:' + JSON.stringify(value.code) + '全部数据流:' + (value.data ? JSON.stringify(value.data) : ''),
		onOk() {
			
		}
	})
	item[key] = value.name
	
}

const tableList = ref([])
//接口请求的方法
const getList = async () => {
	const res = await list({
		current: 1,
		pageSize: 10
	})
	if (res.code) {
		tableList.value = res.data.list
		
	}
	
}
onMounted(()=> {
	getList()
})
</script>
<style scoped lang="scss"></style>